<template>
    <span class="projectCheckTree">
        <el-popover placement="bottom" trigger="click">
            <div style="max-height: 60vh;overflow: auto;">
                <el-input
                    placeholder="请输入楼盘项目名称"
                    v-model.trim="keyword"
                    @input="searchTree">
                </el-input>
                <el-tree
                    class="filter-tree"
                    ref="chooseProjecTree"
                    :data="projectTreeData"
                    :props="{
                        children: 'childList',
                        label: 'nodeName'
                    }"
                    :default-expanded-keys="expandedKeys"
                    :highlight-current="true"
                    node-key="nodeId"
                    :check-strictly="true"
                    :filter-node-method="filterNode"
                    @node-click="checkProject"
                    >
                </el-tree>
            </div>
            <a slot="reference" style="cursor: pointer;">{{projectInfo.nodeName}}<i class="el-icon-arrow-down el-icon--right"></i></a>
        </el-popover>
    </span>
</template>
<script>
export default {
    name: 'projectCheckTree',
    data () {
        return {
            keyword: '',
            expandedKeys: [],
            projectInfo: {}
        };
    },
    props: {
        projectTreeData: {
            type: Array,
            default () {
                return [];
            }
        }
    },
    created () {

    },
    watch: {
        projectTreeData (newVal) {
            this.getUserProjectNode();
        }
    },
    methods: {
        // 获取用户保存的楼盘
        getUserProjectNode () {
            // let {memberId, orgId} = this.$userInfo;
            // this.$Posting(this.$api.getUserProjectNode, {appId: this.$appId, memberId, orgId}).then(res => {
            //     if (res.code === '0') {
            //         const userNode = res.data && res.data.node;
            //         this.projectInfo = userNode && this.projectTreeHasUserNode(userNode) ? userNode : this.getDefaultNode();
            //         this.$emit('getProject', this.projectInfo);
            //         this.expandedKeys = [this.projectInfo.nodeId];
            //     }
            // });
        },
        // 获取默认的楼盘项目(第一个)
        getDefaultNode () {
            let firstNode;
            const loopFn = (treeDataArr = []) => {
                for (let x in treeDataArr) {
                    if (treeDataArr[x].nodeType === '5') {
                        firstNode = firstNode || {...treeDataArr[x]};
                        break;
                    } else {
                        loopFn(treeDataArr[x].childList);
                    }
                }
            };
            loopFn(this.projectTreeData);
            return firstNode;
        },
        // 判断当前楼盘树中是否包含保存的楼盘节点
        projectTreeHasUserNode (userNode) {
            let isExist = false;
            const loopFn = (treeDataArr = []) => {
                for (let x in treeDataArr) {
                    if (treeDataArr[x].nodeId === userNode.nodeId) {
                        isExist = true;
                        break;
                    } else {
                        loopFn(treeDataArr[x].childList);
                    }
                }
            };
            loopFn(this.projectTreeData);
            return isExist;
        },
        // 搜索楼盘项目树
        searchTree () {
            this.$refs.chooseProjecTree.filter(this.keyword);
        },
        // 过滤楼盘项目树
        // filterNode (value, data) {
        //     if (!value) return true;
        //     return data.nodeName.indexOf(value) !== -1;
        // },
        //优化之后的代码 不管有几级都可以适用
        // 过滤楼盘项目树
        filterNode (value, data, node) {
            if (!value) {
                return true;
            }
            let _array = []; // 这里使用数组存储 只是为了存储值。
            this.getReturnNode(node, _array, value);
            let result = false;
            _array.forEach((item) => {
                result = result || item.isPass;
                if (item.isPass) {
                    setTimeout(() => {
                        this.$refs.chooseProjecTree.store.nodesMap[node.data.nodeId].expanded = false;
                    }, 10);
                }
            });
            return result;
        },
        getReturnNode (node, _array, value) {
            let isPass = node.data && node.data.nodeName && node.data.nodeName.indexOf(value) !== -1;
            if (isPass) {
                _array.push({isPass, data: node.data});
            }
            if (!isPass && node.level !== 1 && node.parent) {
                // node.data.expanded = false;
                this.getReturnNode(node.parent, _array, value);
            }
        },
        // 点击楼盘项目节点
        checkProject (node) {
            if (node.nodeType !== '5') {
                this.$message({
                    type: 'warning',
                    message: '请选择楼盘项目'
                });
            } else {
                // 保存选择的楼盘节点
                let {memberId, orgId} = this.$userInfo;
                let postData = {
                    appId: this.$appId,
                    memberId,
                    orgId,
                    node
                };
                this.$Posting(this.$api.setUserProjectNode, postData).then((res) => {
                    if (res.code === '0') {
                        this.projectInfo = {...node};
                        document.body.click();
                        this.$emit('getProject', this.projectInfo);
                    }
                });
            }
        }
    }
};
</script>
<style lang="scss">
.projectCheckTree{
    height: 100%;
    font-size: 16px;
    color: #4A8DF0;
    padding-right: 30px;
    text-indent: 10px;

}
</style>
